<!--负责任务-->
<template>
  <div class="undertakeTasks">
    <el-select v-model="selectProject" placeholder="请选择">
      <el-option v-for="item in projectList" :key="item.value" :label="item.name" :value="item.value"></el-option>
    </el-select>
    <div id="taskChart" style="width:80%;height:215px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "undertakeTasks",
  data(){
    return{
      projectList:[
        {name:'风光一体化防沙治沙',value:'1'},
        {name:'三北六期',value:'2'},
        {name:'蚂蚁森林',value:'3'},
        {name:'蓝旗机器人造林',value:'4'},
      ],
      selectProject:'1',
      chart: undefined,
      annularList: [
        { value: 4, name: "待办" },
        { value: 9, name: "完成" },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods:{
    initChart(){
      const ctx = document.getElementById('taskChart')
      this.chart = echarts.init(ctx)
      const option = {
        backgroundColor:"#fff",
        title: {
          text: 13,
          x: 'center',
          top: '37%',
          textStyle: {
            color: '#FEC171',
            fontSize: 25,
            align: 'center',
          },
        },
        tooltip: {
          show: true,
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          textStyle: {
            align: 'right',
          },
          top: '0%',
          right: '2%',
        },
        color: ['#abd79e', 'green'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              // 设置标签显示信息和格式
              show: true,
              position: 'inner',
              fontSize: 11,
              color: '#ffffff',
              formatter: '{d}%',
              rich: {
                a: {
                  color: "#5ddeE6",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#207e8e",
                  align: "left",
                  padding: 4,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: this.annularList,
          },
        ],
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.undertakeTasks{
  margin: 10px;
}
</style>
